<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">
        .page-notice {
            padding: 40px 24px 70px;
            height: 100%;
        }

        .page-notice-header {
            margin-bottom: 20px;
        }

        .page-notice-body {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            overflow-y: scroll;
        }

        .page-notice-body::-webkit-scrollbar {
            display: none;
        }

        .page-notice-pagetitle {
            position: relative;
        }

        .page-notice-pagetitle::before {
            content: "";
            position: absolute;
            height: 8px;
            width: 15px;
            background-image: url();
            background-size: cover;
            font-size: 30px;
            top: -8px;
            left: 0;
        }

        .page-notice-pagetitle .text {
            position: relative;
        }

        .page-notice-pagetitle .text::after {
            content: "";
            position: absolute;
            height: 8px;
            width: 15px;
            background-image: url();
            background-size: cover;
            font-size: 30px;
            bottom: -8px;
            right: -15px;
        }

        .page-notice-route-item {
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 22%;
            -ms-flex: 0 0 22%;
            flex: 0 0 22%;
        }

        .page-notice-route-item .icon {
            width: auto;
            height: 40px;
            display: block;
            margin: 0 auto 12px;
            font-size: 36px;
        }

        .page-notice-list {
            background-color: #fff;
            padding: 18px 18px;
        }

        .page-notice-route-group {
            overflow-x: scroll;
            padding-bottom: 18px;

        }

        .page-notice-route-group::-webkit-scrollbar {
            display: none;
        }

        .page-notice-mask {
            background-color: rgba(254, 201, 1, 0.5);
            padding: 0 10px;
        }

        .page-notice-item {
            position: relative;
            background-color: #fff;
        }

        .page-notice-item-head .avatar {
            width: 36px;
            height: 36px;
            border-radius: 100%;
            overflow: hidden;
            background-color: #000;
        }

        .page-notice-item-card {
            width: 100%;
            height: 85px;
            position: relative;
            background-color: #fec903;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 3px;
            overflow: hidden;
        }

        .page-notice-title {
            font-weight: 600;
        }

        .page-notice-class-cards {
            margin: 0 24px;
            background-color: #fff;
            padding: 22px 18px;
        }

        .page-notice-class-card {
            position: relative;
            width: 100%;
            height: 85px;
            border-radius: 7px;
            background-color: #fec901;
            margin-top: 22px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
        }

        .page-notice-class-card.add {
            line-height: 85px;
            text-align: center;
            font-size: 40px;
        }

        .page-notice-class-card .text {
            width: 160px;
            margin: 0 auto;
            z-index: 5;
        }

        .page-notice-class-card .text span {
            font-weight: 600;
        }

        .page-notice-class-card:nth-child(1) {
            margin-top: 0;
        }

        .page-notice-add-class {
            width: 100%;
            background: #fec901;
            -webkit-box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            border-radius: 16px;
            width: 320px;
            height: 180px;
            padding: 20px 28px;
            overflow: hidden;
        }
    </style>

</head>

<body>
<div class="page-main">
    <div class="page-main-container">
        <div flex="dir:top" class="child-view page-notice">
            <div class="ui-title-color page-notice-header">
                <div flex="cross:bottom" class="ui-pd-l-10 page-notice-pagetitle">
                    <span class="teacher-name ui-text-28">{{.loginUser.RealName}}</span>
                    <span class="text ui-text-18 ui-mg-l-5">你好</span>
                </div>
                <div flex="" class="ui-mg-t-24 page-notice-route-group">
                    <div class="ui-text-center page-notice-route-item ui-title-color" onclick="location.href='{{urlfor "parent.HomeworkNoticeController.ShowList"}}';">
                        <i class="iconfont icon-zuoye icon"></i>
                        <span class="text">作业通知</span>
                    </div>
                    <div class="ui-text-center page-notice-route-item" onclick="location.href='{{urlfor "parent.MeetingNoticeController.ShowList"}}';">
                        <i class="iconfont icon-huiyi icon"></i>
                        <span class="text">会议通知</span>
                    </div>
                    <div class="ui-text-center page-notice-route-item" onclick="location.href='{{urlfor "parent.SafeNoticeController.ShowList"}}';">
                        <i class="iconfont icon-baojing icon"></i>
                        <span class="text">门禁通知</span></div>
                    <div class="ui-text-center page-notice-route-item" onclick="location.href='{{urlfor "parent.GradeNoticeController.ShowList"}}';">
                        <i class="iconfont icon-chengji icon"></i>
                        <span class="text">成绩通知</span>
                    </div>

                    <div class="ui-text-center page-notice-route-item" onclick="location.href='{{urlfor "parent.SchoolBusNoticeController.ShowList"}}';">
                        <i class="iconfont icon-xiaoche icon"></i>
                        <span class="text">校车通知</span>
                    </div>
                    <div class="ui-text-center page-notice-route-item ui-title-color" onclick="location.href='{{urlfor "parent.CourseNoticeController.ShowList"}}';">
                        <i class="iconfont icon-kechengbiao icon"></i>
                        <span class="text">课程通知</span>
                    </div>
                    <div class="ui-text-center page-notice-route-item ui-title-color" onclick="location.href='{{urlfor "parent.TempNoticeController.ShowList"}}';">
                        <i class="iconfont icon-tiwenbiao icon"></i>
                        <span class="text">体温监测</span>
                    </div>
                </div>
            </div>
            <div class="page-notice-body">
                <div class="page-notice-list">
                    {{range .newNoticeList}}
                        <div class="ui-mg-b-16 page-notice-item" onclick="goNoticeList('{{.Type}}')">
                            <div flex="" class="ui-pd-l-12 ui-mg-b-10 page-notice-item-head">
                                <div class="avatar"></div>
                                <div class="text ui-pd-l-16">
                                    <p class="sender ui-text-16 ui-line-10 ui-mg-b-6">{{.Student.School.Name}}官方</p>
                                    <p class="send-info ui-text-12 ui-line-10">
                                        <span>{{.CreateShowIndex}}</span>
                                    </p>
                                </div>
                            </div>
                            <div class="page-notice-item-card" style="background-image: url('/static/front/images/5.jpg')">
                                <div class="position ui-mask-block page-notice-mask">
                                    <div class="ui-text-16 ui-line-10 ui-mg-b-6 ui-mg-t-30 ui-text-center page-notice-title">
                                        {{.TypeShow}}
                                    </div>
                                    <div class="ui-mg-t-16 ui-text-12 ui-text-right page-notice-recipient">
                                        To{{.Student.RealName}}家长
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{end}}
                </div>
            </div>
        </div>
    </div>

    {{template "common/parent-nav.html" .}}

</div>
</body>

<script type="text/html" id="home-tpl">
    <div class="page-main-home-modal">
        <div class="card">
            <div flex="main:justify" class="top ui-text-center">
                <div class="left ui-pd-t-15" onclick="location.href='{{urlfor "parent.UserController.FamilyMember"}}';">
                    <div class="label ui-text-18">家庭成员：</div>
                    <div class="number"><span class="ui-text-28">{{.familyNum}}</span><span class="ui-text-10">人</span></div>
                </div>
                <div class="right ui-pd-t-15" onclick="location.href='{{urlfor "parent.StudentController.ProtectMember"}}';">
                    <div class="label ui-text-18">守护成员：</div>
                    <div class="number"><span class="ui-text-28">{{.studentNum}}</span><span class="ui-text-10">人</span></div>
                </div>
            </div>
            <div flex="main:justify" class="parents-contact-way" onclick="location.href='{{urlfor "parent.UserController.ParentAddressBook"}}';">
                <span>家长通讯录</span><span>+</span></div>
            <div flex="main:justify" class="school-contact-way" onclick="location.href='{{urlfor "parent.UserController.SchoolAddressBook"}}';">
                <span>校园通讯录</span><span>+</span></div>
        </div>
        <div class="qrcode">
            <img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket={{.ticket}}" alt="" srcset="">
            <p>长按分享二维码</p>
            <p>可邀请家人进入</p>
        </div>
    </div>
</script>

<script>

    var popup = new MPopup({
        content: ``
    });

    function showHome() {
        popup.show($('#home-tpl').html());
    }

    function goNoticeList(type) {
        var url = '';
        switch (type) {
            case '1':
                url = '{{urlfor "parent.SafeNoticeController.ShowList"}}';
                break;
            case '2':
                url = '{{urlfor "parent.SchoolBusNoticeController.ShowList"}}';
                break;
            case '3':
                url = '{{urlfor "parent.HomeworkNoticeController.ShowList"}}';
                break;
            case '4':
                url = '{{urlfor "parent.MeetingNoticeController.ShowList"}}';
                break;
            case '5':
                url = '{{urlfor "parent.GradeNoticeController.ShowList"}}';
                break;
            case '6':
                url = '{{urlfor "parent.CourseNoticeController.ShowList"}}';
                break;
        }
        location.href = url;
    }

</script>

</html>